<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="/JSP/include.jsp"%>


<portlet:actionURL var="login">
	<portlet:param name="action" value="login" />
</portlet:actionURL>

<portlet:actionURL var="register">
	<portlet:param name="action" value="registeruser" />
</portlet:actionURL>


<portlet:resourceURL var="validateDup">
	<portlet:param name="action" value="validateDup" />
</portlet:resourceURL>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'register.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style>
#csp_login{
	margin-left: 5px;
	padding: 0px;
	float: right;
}

#csp_register {
	margin-left: 20px;
	padding: 0px;
}

form {
	height: 430px;
}

#csp_login,#csp_login-top,#csp_login-bottom {
	width: 300px;
	text-align: center;
	float: left;
}

#csp_register,#csp_register-top,#csp_register-bottom {
	width: 500px;
	float: right;
}

#csp_login-top,#csp_register-top {
	position: relative;
	top: -3px;
	margin-top: 0px;
}

#csp_login-bottom,#csp_register-bottom {
	position: relative;
	top: 10px;
	margin-bottom: 0px;
}

#csp_login h3,#csp_register h3 {
	margin-top: 0px;
	background: none;
	border: none;
}

.csp_table-form th {
	padding-right: 0.5em;
}

th,td {
	padding-top: 2px;
	padding-bottom;
	2
	px;
	
}

#csp_login .csp_table-form td.errorMessage {
	padding-bottom: 1em;
}
</style>
<script type="text/javascript"><!--
$(document).ready(function() { 
		//login part	    
	    $.formValidator.initConfig({formID:"loginForm",
		onError:function(msg,obj,errorlist){
			$("#errorlist").empty();
			$.map(errorlist,function(msg){
				$("#errorlist").append("<li><font color="+"red"+"> " + msg + "</font></li>")
			});
		},
		submitAfterAjaxPrompt : 'Validating! Please wait...'
	});
	$("#loginEmail").formValidator({onShow:"Please Enter an Username",onFocus:"Username should be an Email",onCorrect:"Correct Username Format"}).inputValidator({min:1,onError:"Please Enter a Username"}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"Username need to be a Email"});

	//register part
	$.formValidator.initConfig({validatorGroup:"2",formID:"registerForm", submitButtonID:"register",
			onError:function(msg,obj,errorlist2){
						$("#errorlist2").empty();
			$.map(errorlist2,function(msg){
				$("#errorlist2").append("<li><font color="+"red"+"> " + msg + "</font></li>")
			});
		},
		submitAfterAjaxPrompt : 'Validating! Please wait...'			
	});
	
	$("#email").formValidator({validatorGroup:"2",onShow:"Please Enter an Email",onFocus:"Please Enter an Email",onCorrect:"Correct Username Format"}).inputValidator({min:1,onError:"Username can't be Empty"}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"Please Enter an Email"})
			.ajaxValidator({
					dataType : "post",
					async : true,
					url :"${validateDup}",
					success : function(data){
						if(data == 'true') return true;
//			            if( data.equals(false)) return false;
						return false;
					},
					buttons: $("#button"),
					error: function(jqXHR, textStatus, errorThrown){alert("Server not Responding，please try again"+errorThrown);},
					onError : "User Already Exists",
					onWait : "Validating! Please wait.."
			});
	
	$("#pass").formValidator({validatorGroup:"2",onShow:"Please enter password",onFocus:"Typing..",onCorrect:"Password Typed"}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"Wrong Password Format"},onError:"Password can't be Empty"});
	$("#confirmPass").formValidator({validatorGroup:"2",onShow:"please confirm password",onFocus:"Typing",onCorrect:"Password Confirmed"}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"Wrong Password Format"},onError:"Password can't be Empty"}).compareValidator({desID:"pass",operateor:"=",onError:"Unmatched Password"});
	$("#fname").formValidator({validatorGroup:"2",onShow:"Please Enter Your First Name",onFocus:"Typing",onCorrect:"\b"}).inputValidator({min:1,onError:"Please Enter your First Name"});
	$("#mname").formValidator({validatorGroup:"2",onShow:"optional",onFocus:"Typing",onCorrect:"\b"}).inputValidator({min:0,onError:"\b"});
	$("#lname").formValidator({validatorGroup:"2",onShow:"Please Enter Your Last Name",onFocus:"Typing",onCorrect:"\b"}).inputValidator({min:1,onError:"Please Enter your Last Name"});
	$("#contact").formValidator({validatorGroup:"2",onShow:"optional",onFocus:"Typing",onCorrect:"\b"}).inputValidator({min:0,onError:"\b"});
	$("#unit").formValidator({validatorGroup:"2",onShow:"optional",onFocus:"Typing",onCorrect:"\b"}).inputValidator({min:0,onError:"\b"});
	$("#position").formValidator({validatorGroup:"2",onShow:"optional",onFocus:"Typing",onCorrect:"\b"}).inputValidator({min:0,onError:"\b"});

	});
	
--></script>



 </head>
  
 <body> 

<div class="csp_wrap">

	<div id="csp_login"
			class="csp_layout-floatCol csp_transparency solid">

	<form:form id="loginForm" name="loginForm" action="${login}">
		<!--################## IF LOGIN FAILED, SHOW THIS MESSAGE -->
		<c:if test="${not empty isLoginFailed}">
			<p class="csp_spotLight csp_spotLight-fail" style="display: inline">
				Unvalidate Username or Password!
			</p>
		</c:if>
		
		<h3>
			Sign in
		</h3>
		<ul id="errorlist"></ul> 
		<table>
			<tr>
				<th>
					Username
				</th>
				<td align="left">
					<input type="text" id="loginEmail" name="loginEmail" value="" />
				</td>
			</tr>
			<tr >
				<td></td>
				<td align="left"><div id="loginEmailTip" ></div></td>
			</tr>
			<tr>
				<th>
					Password
				</th>
				<td align="left">
					<input type="password" name="loginPass" id="loginPass" value="" />
				</td>
			</tr>
			<tr>
				<td></td>
				<td align="left"><div id="loginPassTip"></div></td>
			</tr>
			<tr>
				<td></td>
				<td class="csp_layout-innerCenter">
					<input type="submit" name="login" class="btn1 pbtn1"
					onmouseover="this.style.borderColor='#75cd02'"
					onmouseout="this.style.borderColor='#dcdcdc'"
					style="border-top-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220); border-left-color: rgb(220, 220, 220); "
					value="Login" />
					<a href="http://passport.escience.cn/password.jsp" target="_blank"
						class="csp_text-note" /> Forgot your password </a>
				</td>
			</tr>
		</table>
	</form:form>
</div>


	<div id="csp_register"
		class="csp_layout-floatCol csp_transparency solid">

<form:form id="registerForm" name="registerForm" action="${register}">
	<h3>
		Register if don't have an account!
	</h3>
	<table>
		<tr>
			<th width="120" align="right">
				Username
			</th>
			<td class="csp_text-alert" width="10">
				*
			</td>
			<td width="180">
				<input type="text" name="email" id="email" value="" />
			</td>
			<td align="left" width="400">
				<div class="csp_text-note" id="emailTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Password
			</th>
			<td class="csp_text-alert" width="10">
				*
			</td>
			<td>
				<input type="password" id="pass" name="pass" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="passTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Retype Password
			</th>
			<td class="csp_text-alert" width="10">
				*
			</td>
			<td>
				<input type="password" name="confirmPass" id="confirmPass" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="confirmPassTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Fisrt name
			</th>
			<td class="csp_text-alert" width="10">
				*
			</td>
			<td>
				<input type="text" name="fname" id="fname" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="fnameTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Middle name
			</th>
			<td class="csp_text-alert" width="10">
			</td>
			<td>
				<input type="text" name="mname" id="mname" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="mnameTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Last name
			</th>
			<td class="csp_text-alert" width="10">
				*
			</td>
			<td>
				<input type="text" name="lname" id="lname" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="lnameTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Company
			</th>
			<td class="csp_text-alert" width="10">
			</td>
			<td>
				<input type="text" name="unit" id="unit" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="unitTip"></div>
			</td>
		</tr>
		<tr>
			<th align="right">
				Job Title
			</th>
			<td class="csp_text-alert" width="10">
			</td>
			<td>
				<input type="text" name="position" id="position" value="" />
			</td>
			<td align="left">
				<div class="csp_text-note" id="positionTip"></div>			
			</td>
		</tr>
		<tr>
			<th align="right">
				Cell Phone
			</th>
			<td class="csp_text-alert" width="10">
			</td>
			<td>
				<input type="text" name="contact" id="contact" value=""/>
			</td>
			<td align="left">
				<div class="csp_text-note" id="contactTip"></div>			
			</td>
		</tr>
		<tr>
			<td colspan="4" class="csp_layout-innerCenter">
				<br />
				<input type="submit" name="register" id="register" class="btn1 pbtn1"
					onmouseover="this.style.borderColor='#75cd02'"
					onmouseout="this.style.borderColor='#dcdcdc'"
					style="border-top-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-bottom-color: rgb(220, 220, 220); border-left-color: rgb(220, 220, 220); "
					value="Register" />

			</td>
		</tr>
	</table>
</form:form>

    
  </body>
</html>
